<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
	<title>loading进度条</title>
	<style type="text/css">
		#center{
			margin: 50px auto;
			width: 400px;
		}
		#loading{
			width: 397px;
			height: 49px;
			/*background: url('1.png') no-repeat;*/
			background-color:#c1c1c1; 
		}
		#loading div{
			width: 0px;
			height: 48px;
			/*background: url('2.png') no-repeat;*/
			background-color: green;
			color: #fff;
			text-align: center;
			font-family: Tahoma;
			line-height: 48px;
		}
		/*#message{
			width: 200px;
			height: 100px;
			font-family: Tahoma;
			font-size: 35px;
			background-color: #d8e7f0;
			border: 1px solid #187CBE;
			display: none;
			line-height: 35px;
			text-align: center;
			margin-bottom: 10px;
			margin-left: 50px;
		}*/
	</style>
</head>
<body>
<div id="center">
	<!-- <div id="message"></div> -->
	<div id="loading"><div></div></div>
</div>
</body>
</html>

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
		doProgress();
	})
	var progress_id = 'loading';
	function SetProgress(progress){
		if(progress){
			$('#'+progress_id+'> div').css('width',String(progress)+'%');//控制loading div的宽度
			$('#'+progress_id +'> div').html(String(progress)+'%');//显示百分比
		}
	}
	var i=0;
	function doProgress(){
		if(i>100){
			alert('加载完毕！！');
			return;
		}
		if(i <=100){
			setTimeout('doProgress()',50);
			SetProgress(i);
			i++;
		}
	}
	
</script>